<template>
  <v-data-table
    :headers="headers"
    :items="users"
    class="elevation-1"
    hide-default-footer
  >
    <template #item.index="{ index }">
      {{ (page - 1) * pageSize + index + 1 }}
    </template>
    <template #item.id="{ item }">
      <v-tooltip location="top">
        <template #activator="{ props }">
          <span v-bind="props" class="ellipsis-id">
            {{ item.id && item.id.length > 5 ? item.id.slice(0, 5) + '...' : item.id }}
          </span>
        </template>
        <span>{{ item.id }}</span>
      </v-tooltip>
    </template>
    <template #item.create_time="{ item }">
      <v-tooltip location="top">
        <template #activator="{ props }">
          <span v-bind="props" class="ellipsis-time">
            {{ item.create_time && item.create_time.length > 10 ? item.create_time.slice(0, 10) + '...' : item.create_time }}
          </span>
        </template>
        <span>{{ item.create_time }}</span>
      </v-tooltip>
    </template>
    <template #item.update_time="{ item }">
      <v-tooltip location="top">
        <template #activator="{ props }">
          <span v-bind="props" class="ellipsis-time">
            {{ item.update_time && item.update_time.length > 10 ? item.update_time.slice(0, 10) + '...' : item.update_time }}
          </span>
        </template>
        <span>{{ item.update_time }}</span>
      </v-tooltip>
    </template>
    <template #item.status="{ item }">
      <v-chip :color="item.status === 1 ? 'green' : 'grey'" dark>
        {{ item.status === 1 ? '启用' : '禁用' }}
      </v-chip>
    </template>
    <template #item.actions="{ item }">
      <v-btn size="small" icon="mdi-eye" variant="text" @click="$emit('action', { type: 'view', user: item })" title="查看" />
      <v-btn size="small" icon="mdi-pencil" variant="text" color="primary" @click="$emit('action', { type: 'edit', user: item })" title="编辑" />
      <v-btn size="small" icon="mdi-account-key" variant="text" color="success" @click="$emit('action', { type: 'assignRole', user: item })" title="分配角色" />
    </template>
  </v-data-table>
</template>

<script setup>
const props = defineProps({
  users: {
    type: Array,
    default: () => []
  },
  page: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 20
  }
})
const headers = [
  { title: '序号', key: 'index' },
  { title: '用户ID', key: 'id' },
  { title: '用户名', key: 'username' },
  { title: '用户邮箱', key: 'email' },
  { title: '用户状态', key: 'status' },
  { title: '添加时间', key: 'create_time' },
  { title: '更新时间', key: 'update_time' },
  { title: '操作', key: 'actions', sortable: false, width: 160 },
]
const emit = defineEmits(['action'])
</script>

<style scoped>
.ellipsis-id {
  display: inline-block;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.ellipsis-time {
  display: inline-block;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
</style> 